interface PlayBallType {
  x?: number
  y?: number
  r: number
  color?: string
  speedX?: number
  speedY?: number
  ctx: HTMLCanvasElement
}
export default class PlayBall {
  x = 30 // 小球的出示横坐标
  y = 30 // 小球的出示纵坐标
  r = 30 // 小球的半径
  color = '#3a96ff' // 小球的颜色
  speedX = 2 // 小球的横向滚动速度
  speedY = 2 // 小球的纵向向滚动速度
  static CANVAS_WIDTH = 500
  static CANVAS_HEIGHT = 500
  ctx: CanvasRenderingContext2D
  constructor(ballInfo: PlayBallType) {
    this.ctx = ballInfo.ctx.getContext('2d')!
    this.x = ballInfo.x ?? ballInfo.r
    this.y = ballInfo.y ?? ballInfo.r
    this.color = ballInfo.color ?? '#3a96ff'
    this.r = ballInfo.r
    this.speedX = ballInfo.speedX ?? 2
    this.speedY = ballInfo.speedY ?? 2
  }

  drawInitCircle() {
    this.ctx.beginPath()
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
    this.ctx.fillStyle = this.color
    this.ctx.fill()
  }

  moveBall() {
    this.x += this.speedX
    this.y += this.speedY
    if (this.x > PlayBall.CANVAS_WIDTH - this.r || this.x < this.r) {
      this.speedX *= -1
    }

    if (this.y > PlayBall.CANVAS_HEIGHT - this.r || this.y < this.r) {
      this.speedY *= -1
    }
  }

  clearCanvas() {
    this.ctx.clearRect(0, 0, PlayBall.CANVAS_WIDTH, PlayBall.CANVAS_HEIGHT)
  }
}
